<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
</head>
<body>

    <div id="example"></div>

    <script type="text/babel">
       /* var Hello = React.createClass({
            getInitialState:function(){
                return {
                    opacity:1.0
                };
            },
            componentDidMount:function(){
                this.timer = setInterval(function(){
                    var opacity = this.state.opacity;
                    opacity-=0.3;
                    if(opacity<0.1){
                        opacity = 1.0;
                    }
                    this.setState({
                        opacity:opacity
                    });
                }.bind(this),100);
            },
            render:function(){
                return (
                        <div style={{opacity:this.state.opacity}}>
                            Hello {this.props.name}
                        </div>
                );
            }
        });

        ReactDOM.render(
                <Hello name="world" />,
                document.getElementById("example")
        );*/

       var Button = React.createClass({
           getInitialState:function(){
               return {
                   data : 0
               };
           },
           componentWillReceiveProps:function(){
               console.log("Button Component WILL RECEIVE PROPS!");
           },
           // 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
           shouldComponentUpdate:function(newProps,newState){
               console.log("Button true");
               console.log("Button:"+newProps);
               console.log("Button:"+newState);

               return true;
           },
           //在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
           componentWillUpdate:function(){
               console.log("Button Component WILL UPDATE!");
           },
           //在组件完成更新后立即调用。
           componentDidUpdate:function(){
               console.log("Button Component DID UPDATE!");
           },
           setNewnumber:function(){
               this.setState({
                   data:this.state.data+1
               });
           },
            render:function(){
                return (
                        <div>
                            <button onClick={this.setNewnumber}>Increment</button>
                            <Content myNumber={this.state.data}></Content>
                        </div>
                );
            }
       });

        var Content = React.createClass({
            //组件渲染前调用
            componentWillMount:function(){
                console.log("Content Component WILL MOUNT!");
            },
            //组件第一次渲染后调用
            componentDidMount:function(){
                console.log("Content Component Did MOUNT!");
            },

            // 在组件接收到一个新的prop时被调用
            componentWillReceiveProps:function(){
                console.log("Content Component WILL RECEIVE PROPS!");
            },
            // 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
            shouldComponentUpdate:function(newProps,newState){
                console.log("Content true");
                console.log("Content:"+newProps);
                console.log("Content:"+newState);
                return true;
            },
            //在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
            componentWillUpdate:function(){
                console.log("Content Component WILL UPDATE!");
            },
            //在组件完成更新后立即调用。
            componentDidUpdate:function(){
                console.log("Content Component DID UPDATE!");
            },
            //在组件从 DOM 中移除的时候立刻被调用
            componentWillUnmount:function(){
                console.log("Content Component WILL UNMOUNT!");
            },
            render:function(){
                return (
                        <div>
                            <h3>{this.props.myNumber}</h3>
                        </div>
                );
            }
        });

        ReactDOM.render(
                <div>
                    <Button />
                </div>,
                document.getElementById("example")
        );
    </script>
</body>
</html>